import axios from 'axios';
import React, { Component } from 'react'
import './index.css'

export default class ScoreQuery extends Component {

  state = {
    students:[],
    scoreList:[]
  }

  componentDidMount(){
    this.QueryScore();
  }

  HandleBack = ()=>{
    let history = this.props.history;
    history.push('/ScoreList')
  }

  QueryScore(){
    let queryID = this.props.match.params.id 
    console.log(queryID)
    axios.get('/Sidebar/ScoreQuery/user/getScoreXue/'+queryID).then((response)=>{
      console.log(response.data)
      this.setState({students:response.data.data})
      this.setState({scoreList:response.data.data.scores})
    },
    error => {console.log('失败了',error);}
    )
  }

  render() {
    const students = this.state
    const scoreList = this.state
    return (
      <div>
        <div id="all">
          <div id="content">
            <p id="title">
              期末考试成绩如下
            </p>
            <table id="table1">
              <tr>
                <td>姓&ensp;&ensp;&ensp;&ensp;名：</td>
                <td>{students.students.name}</td>
              </tr>
              <tr>
                <td>学&ensp;&ensp;&ensp;&ensp;院：</td>
                <td>{students.students.college}</td>
              </tr>
            </table>
            <p class="title">笔试课程</p>
            <table id="table2">
              <tr>
                <td>学号：</td>
                <td colspan="2">{students.students.stuID}</td>
              </tr>
              <tr>
                <td>总&ensp;&ensp;&ensp;&ensp;分：</td>
                <td id="redscore">{students.students.total}</td>
              </tr>
              {students.scoreList.map((scoreclass)=>
              <tr>
                <td></td>
                <td>{scoreclass.courseName}</td>
                <td className="scores">{scoreclass.score}</td>
              </tr>
              )}
            </table>
            <a onClick={this.HandleBack}>返回</a>
          </div>
        </div>
      </div>
    )
  }
}
